<template>
  <div class="wraps">
    <!-- 左 送检预警 -->
    <div class="Left">
      <el-card class="box-card" shadow="hover" style="height: 83.5vh; position: relative;">
        <div slot="header" class="clearfix">
          <span style="font-size: 20px; color: #1890ff; font-weight: 550">库存预警</span>
        </div>
        <el-table ref="table" highlight-current-row height="70vh"
                  :header-cell-style="{background:'#F0F8FF',color:'#000000',fontWeight:'bold'}"
                  :data="wzxxList">
          <el-table-column label="序号" align="center" type="index" :index="indexMethod"/>
          <el-table-column show-overflow-tooltip label="物资名称" align="center" prop="wzName">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="handleButtonClick(scope.row)"
              >
                <el-link style="font-weight: 600" type="primary">{{ scope.row.wzName }}</el-link>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="物资单位" align="center" prop="wzDw"/>
          <el-table-column show-overflow-tooltip label="所属仓库" align="center" prop="ckName"/>
          <el-table-column show-overflow-tooltip label="所属货架" align="center" prop="hjName"/>
          <el-table-column show-overflow-tooltip label="所属分层" align="center" prop="fcName"/>
          <el-table-column show-overflow-tooltip label="物资分类" align="center" prop="wzFl"/>
          <el-table-column show-overflow-tooltip label="物资规格" align="center" prop="wzGg"/>
          <el-table-column show-overflow-tooltip label="物资专业" align="center" prop="wzZy"/>
          <el-table-column show-overflow-tooltip label="单价" align="center" prop="dj"/>
          <el-table-column show-overflow-tooltip label="安全库存" align="center" prop="aqKc">
            <template slot-scope="scope">
              <span style="color: #2da62d">{{scope.row.aqKc}}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="当前库存" align="center" prop="kc">
            <template slot-scope="scope">
              <span style="color: red">{{scope.row.kc}}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="所属部门" align="center" prop="deptName"/>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-card>
    </div>

    <!-- 物资详情 -->
    <WzXq ref="wzXq"/>

  </div>
</template>

<script>
import {selectAqkcList} from "@/api/wzgl/wzxx";
import SjYjLb from "@/views/sbgl/sbglkb/components/SjYjLb.vue";
import SbZtTj from "@/views/sbgl/sbglkb/components/SbZtTj.vue";
import WzXq from "@/views/wzgl/wzxx/components/WzXq.vue";

export default {
  name: "wzglkb", //物资管理看板
  components: {WzXq, SbZtTj, SjYjLb},
  //物资基本信息
  dicts: ['wzgl_ckglzt'],
  data() {
    return {
      wzxxList: [],
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        wzName: null,
        ssCk: null,
        ssHj: null,
        ssFc: null,
        wzFl: null,
        wzGg: null,
        wzZy: null,
        userId: null,
        deptId: null,
        ckName: null,
        hjName: null,
        fcName: null,
        ckGlZt: null,
      },
      // 总条数
      total: 0,

    }
  },
  created() {
    this.getList();
  },
  methods: {
    /** 自定义序号 */
    indexMethod(index) {
      let pageNum = this.queryParams.pageNum - 1;
      if ((pageNum !== -1 && pageNum !== 0)) {
        return (index + 1) + (pageNum * this.queryParams.pageSize);
      } else {
        return (index + 1)
      }
    },
    /** 查询库存小于安全库存的数据 */
    getList() {
      this.loading = true;
      selectAqkcList(this.queryParams).then(response => {
        this.wzxxList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 查看物资详情信息
    handleButtonClick(row) {
      this.$refs.wzXq.handleOpen(row);
    },

  }
}
</script>

<style scoped>
.wraps {
  position: relative;
  background-size: cover;
  width: 100%;
  height: calc(100vh - 134px);
  overflow: hidden; /* 防止 leftpart 超出 wrap */
}

/* 左上 */
.Left {
  position: absolute;
  top: 1%; /* 距离上面 6% */
  bottom: 1%; /* 距离下面 60% */
  left: 0.5%; /* 距离左侧1% */
  width: 99%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5); !* 模块背景颜色 并透明显示 *!*/
}
</style>
